<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web前端开发工程师简历 - 韩世强</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta name="description" content="韩世强 的web前端开发工程师简历"/>
    <meta name="author" content="韩世强"/>
    <meta name="keywords" content="web前端，web前端个人简历，前端开发，IT"/>
    <meta name="contact" content="tel:13641276693 e-mail:13641276693@163.com"/>
    <!--<link rel="shortcut icon" href="/images/favicon.ico"/>-->
    <!--lib css-->
    <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/jquery.fullpage.css"/>
    <link rel="stylesheet" href="css/animate.css">
    <!--personal css-->
    <link rel="stylesheet" href="css/index.css"/>
</head>
<body style="position:relative;">
    <!--<div id="enter" style="position:absolute;left: 0;top: 0; z-index:101;width:100%; height: 100%; background: #127CC7 url('picture/enter.gif') no-repeat center center;-->
    <!--background-size: auto;"></div>-->
    <!--<div id="body" style="position:absolute;left:0; top:0; z-index: 99;  width:100%; height: 100%;">-->
    <!--导航栏-->
    <nav class="navbar navbar-default resume">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand EngName" data-menuanchor="page1" href="#page1">韩世强</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right" id="menu">
                    <li data-menuanchor="page2" class="active">
                        <a href="#page2">基本资料</a>
                    </li>
                    <li data-menuanchor="page3">
                        <a href="#page3">专业技能</a>
                    </li>
                    <li data-menuanchor="page4">
                        <a href="#page4">个人经历</a>
                    </li>
                    <li data-menuanchor="page5">
                        <a href="#page5">项目经验</a>
                    </li>
                    <li data-menuanchor="page6">
                        <a href="#page6">自我简述</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="guns sky">
        <div class="clouds_one"></div>
        <div class="clouds_two"></div>
        <div class="clouds_three"></div>
    </div>
    <div class="pure">

    </div>
    <div id="resume">
        <div class="section item-1">

            <div class="row word">
                <h2 class="resume-hide">韩世强</h2>
                <span class="resume-hide">前端工程师</span>
                <span class="hidden-xs resume-hide">简历</span>
                <span class="col-xs-12 hidden-sm hidden-md hidden-lg resume-hide">简历</span>
                <br/>
                <br/>
                <p class="motto resume-hide hinge-sty" style="position: relative">知识改变命运<br/>创新改变未来</p>
                <a href="#" class="next-page ">
                    <span class="glyphicon glyphicon-chevron-down"></span>
                </a>
            </div>
            <!--<div id="canvasBg"></div>-->
            <canvas id="canvas"></canvas>
        </div>
        <div class="section item-2">
            <div class="container">
                <h class='hidden-xs hidden-sm page2-title'>基本资料</h>
                <div class="row">
                    <div class=" icon-infomation col-xs-6 col-sm-6 col-md-3">
                        <img src="picture/glass.png" alt="">
                        <h4>基本信息</h4>
                        <p>
                            姓名: 韩世强 &nbsp;&nbsp;性别：男
                            <br>
                            年龄: 27岁 籍贯：河南
                        </p>
                    </div>
                    <div class=" icon-infomation col-xs-6 col-sm-6 col-md-3">
                        <img src="picture/hat.png" alt="">
                        <h4>所在院校</h4>
                        <p>
                            河南理工大学万方科技学院
                        </p>

                    </div>
                    <div class=" icon-infomation col-xs-6 col-sm-6 col-md-3">
                        <img src="picture/book.png" alt="">
                        <h4>学历</h4>
                        <p>
                            本科
                        </p>
                    </div>
                    <div class=" icon-infomation col-xs-6 col-sm-6 col-md-3">
                        <img src="picture/tel.png" alt="">
                        <h4>联系方式</h4>
                        <p>
                            邮箱:13641276693@163.com
                            <br>
                            电话:13641276693
                        </p>
                    </div>
                </div>

            </div>
        </div>
        <div class="section item-3">
            <div class="container">
                <div class="img-3 hidden-xs">
                    <img src="picture/5(2).png" alt="">
                </div>
                <div class="bg-img hidden-xs hidden-sm">
                    <img src="picture/1(4).png" alt="">
                </div>
                <div class="sm-img fly hidden-xs hidden-sm">
                    <img src="picture/2(3).png" alt="">
                </div>


                <div class="skill-introduce">
                    <div class="media">
                        <div class="media-left media-top">
                            <a href="#" class=''>
                                <img class="media-object" src="picture/tv8.png" alt="">
                            </a>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">PC端</h4>
                            <p>
                                1、熟练掌握HTML5、CSS3、JavaScript实现各种页面的编写，按照规范手写页面代码，顾及浏览器的兼容性；
                                <br/>
                                2、熟练掌握JavaScript语言中的面向对象，了解原型和作用域链，熟悉DOM编程及面向对象的编程思想；
                                <br/>
                                3、熟练运用jQuery库，熟悉Angular,jQueryMoble等js相关框架、Ajax服务器异步请求和页面的局部刷新等；
                                <br/>
                                4、熟练使用Bootstrap实现页面的响应式布局，掌握浏览器兼容性等相关技术。
                                <br>
                                ................................

                            </p>

                        </div>
                    </div>
                    <div class="media ">
                        <div class="media-left media-top">
                            <a href="#" class=''>
                                <img class="media-object" src="picture/apple6.png" alt="">
                            </a>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">手机端</h4>
                            <p>1、熟练使用jQueryMobile等移动框架进行移动页面的开发
                                <br>2、掌握 移动端编程，会基于流式布局以及 响应式布局 开发基于移动端的页面。
                                <br>3、熟练使用Bootstrap 框架 的使用。
                            </p>
                        </div>
                    </div>
                    <div class="media ">
                        <div class="media-left media-top">
                            <a href="#" class=''>
                                <img class="media-object" src="picture/baterry10.png" alt="">
                            </a>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">其他</h4>
                            <p>1、熟悉ES6新特性，及vue,react等js框架，了解ES7。
                                <br/>
                                2、会使用node.js,php,MySQL数据库,了解Apache服务器,http协议,Python,java等后台开发；
                                <br/>
                                3、熟练运用WebStorm、EditPlus、Visual、Eclipse等工具的使用,使用Git，SVN版本控制工具；
                            </p>
                        </div>
                    </div>
                </div>

                <div class="skills hidden-xs">
                    <span class="subject-9">Vue</span>
                    <span class="subject-2">Bootstrap</span>
                    <span class="subject-3">CANVAS</span>
                    <span class="subject-4">jQuery</span>
                    <span class="subject-10">Angular</span>
                    <span class="subject-5">移动端</span>
                    <span class="subject-6">CSS3</span>
                    <span class="subject-7">响应式</span>
                    <span class="subject-8">Nodejs</span>
                    <span class="subject-1">HTML5</span>
                </div>
            </div>
        </div>
        <div class="section item-4" id='item-4'>
            <div class="container">
                <span class='title hidden-xs  hidden-sm' style='display: inline-block'>个人经历</span>
                <span class='sign col-xs-12 hidden-xs  hidden-sm' style='font-size: 20px'>热爱技术,专注用户体验</span>
                <div class="row">
                    <div class="col-xs-12 col-md-3">
                        <div class="thumbnail">
                            <img src="picture/fenhiyddtgcjpg.jpg" class=' img-circle team-img' alt="">
                            <div class="caption">
                                <h3>3年左右工作经验</h3>
                                <p>证书：获得英语四级</p>
                                <p>高级Web工程师证书</p>
                                <p>酷爱IT领域，尤其前端</p>
                            </div>
                        </div>
                    </div>
                    <div id="carousal" class="col-xs-12 col-md-9">
                            <ul class="img">
                                <li>
                                    <a href="#"><img class="img-responsive" src="images/one.jpg" alt=""/></a>
                                    <div class="details">
                                        <h3>自学前端技术</h3>
                                        <h5>2012/10-2014/03</h5>
                                        <p>自学html,css,js;</p>
                                        <p>简单回事写出些静态页面;</p>
                                        <p>了解php,mySql;</p>
                                    </div>
                                </li>
                                <li>
                                    <a href="#"><img class="img-responsive" src="images/two.jpg" alt=""/></a>
                                    <div class="details">
                                        <h3>智云联创科技有限公司</h3>
                                        <h5>2014/05-2016/12</h5>
                                        <p>熟练用html,css,js,jQuery,Bootstrap等创建官网页面;</p>
                                        <p>了解Java后台开发，能与后台很好的合作;</p>
                                        <p>负责官网的调试及维护;</p>
                                    </div>
                                </li>

                                <li><a href="#"><img class="img-responsive" src="images/exp_list_bg.jpg" alt=""/></a>
                                    <div class="details">
                                        <h3>青藤文化股份有限公司</h3>
                                        <h5>2016/12-2016/04/21</h5>
                                        <p>负责微信网页开发，微信公众号后台管理开发，以及优化，维护，升级；</p>
                                        <p>负责公司迁想公关官网的开发，及优化，维护，升级。</p>
                                    </div>
                                </li>
                                <li>
                                    <a href="#"><img class="img-responsive" src="images/dream.jpg" alt=""/></a>
                                    <div class="details">
                                        <h3>学习、探索中....</h3>
                                        <h5>The Beautyful Of Futrue......</h5>
                                        <p>会使用ES6新特性（箭头函数，Class类，let等），了解ES7(async await);</p>
                                        <p>会使用Vue.js,node.js;</p>
                                        <p>了解Python,学习Python;</p>
                                        <p>...................</p>
                                    </div>
                                </li>
                            </ul>
                            <div class="lf btn"><</div>
                            <div class="rt btn">></div>
                            <div id="timeLines"></div>
                            <ul class="indexs">
                                <li><div class="shows">2012/10-2014/03</div></li>
                                <li><div class="shows">2014/05-2016/12</div></li>
                                <li><div class="shows">2016/12-2017/05</div></li>
                                <li><div class="shows">学习、探索中....</div></li>
                            </ul>

                    </div>
                </div>

            </div>
        </div>
        <div class="section item-5">
            <!--第一屏-->
            <div class="slide hidden-xs">
                <div class="container" id='container-img'>
                    <div class="row">
                        <div class="portfolio-items">

                            <div class="col-sm-6 col-md-3 col-lg-3">
                                <div class="portfolio-item">
                                    <div class="hover-bg">
                                        <div class="hover-text">
                                            <h4><a href="https://floatyike.github.io/meishiguan/" target='_blank' title="美食馆">美食馆</a></h4>
                                            <small>技术：HTML+CSS+js+Bootstrap+Angular+PHP+Mysql</small>
                                        </div>
                                        <img src="picture/food.png" class="img-responsive" alt=""></div>
                                </div>
                            </div>

                            <div class="col-sm-6 col-md-3 col-lg-3">
                                <div class="portfolio-item">
                                    <div class="hover-bg">
                                        <div class="hover-text">
                                            <h4><a href="http://www.hnzylc.cn" target='_blank' title="云销城">云销城</a></h4>
                                            <small>技术：HTML+CSS+JavaScript+jQuery+Bootstrap</small>
                                        </div>
                                        <img src="picture/yunxiaocheng.png" class="img-responsive" alt="云销城"></div>
                                </div>
                            </div>

                            <div class="col-sm-6 col-md-3 col-lg-3">
                                <div class="portfolio-item">
                                    <div class="hover-bg">
                                        <div class="hover-text">
                                            <h4><a href='javascript:;' target='_blank' title=""></a>小溪汇聚科技</h4>
                                            <small>技术：HTML+CSS+Js+JSP+jQuery+Bootstrap+jQgrid+Echart</small>
                                        </div>
                                        <img src="picture/xiaoxi.png" class="img-responsive" alt=""></div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-3 col-lg-3">
                                <div class="portfolio-item">
                                    <div class="hover-bg">
                                        <div class="hover-text">
                                            <h4><a href='http://ecs.imingbai.com/ContentCenter/DrG/' target='_blank' title="微信开发">微信开发</a></h4>
                                            <small>技术：HTML+CSS+Js+jQuery+fastclick.js</small>
                                        </div>
                                        <img src="picture/mingbai.png" class="img-responsive" alt=""></div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-3 col-lg-3">
                                <div class="portfolio-item">
                                    <div class="hover-bg">
                                        <div class="hover-text">
                                            <h4><a href='https://floatyike.github.io/qianxiangguan/' target='_blank' title="">迁想公关</a></h4>
                                            <small>技术：HTML+CSS+Js+jQuery+three.js+TweenMax.min.js</small>
                                        </div>
                                        <img src="picture/qianxiang.png" class="img-responsive" alt=""></div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-3 col-lg-3">
                                <div class="portfolio-item">
                                    <div class="hover-bg">
                                        <div class="hover-text">
                                            <h4><a href='javascript:;' target='_blank' title="">外卖网</a></h4>
                                            <small>技术：Vue2.0、vuex、vue-router、axios、webpack、eslint、better-scrol、stylus</small>
                                        </div>
                                        <img src="picture/waimai.png" class="img-responsive" alt=""></div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-3 col-lg-3">
                                <div class="portfolio-item">
                                    <div class="hover-bg">
                                        <div class="hover-text">
                                            <h4><a href='javascript:;' target='_blank' title=""></a>待续......</h4>
                                            <small>敬请期待..........</small>
                                        </div>
                                        <img src="picture/continue.jpg" class="img-responsive" alt="">
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <!--第二屏-->
            <div class="slide">
                <div class="rotator">
                    <div id="rot1">
                        <img src="" width="800" height="300" class="bg" alt=""/>
                        <div class="heading">
                            <h1></h1>
                        </div>
                        <div class="description">
                            <p></p>
                        </div>
                    </div>
                    <ul id="rotmenu">
                        <li>
                            <a href="#">俄罗斯方块</a>
                            <div style="display:none;">
                                <div class="info_image">tetris.png</div>
                                <div class="info_heading">俄罗斯方块</div>
                                <div class="info_description">
                                    通过面向对象封装方法。
                                    <br><a href="https://floatyike.github.io/game2/" target= _blank class="more">play</a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <a href="#">2048</a>
                            <div style="display:none;">
                                <div class="info_image">2048.png</div>
                                <div class="info_heading">2048游戏</div>
                                <div class="info_description">
                                    通过面向对象封装方法。
                                    <br><a href="https://floatyike.github.io/game1/" target= _blank class="more">play</a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <a href="#">飞机大战</a>
                            <div style="display:none;">
                                <div class="info_image">airwar.png</div>
                                <div class="info_heading">飞机大战</div>
                                <div class="info_description">
                                   利用Canvas绘图，手机也可以玩。
                                    <br><a href="https://floatyike.github.io/air/" target= _blank class="more">play</a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="section item-6">
            <h1>兴趣爱好、自我评价</h1>
            <div class="word">
                <p>
                    酷爱前端，希望能在前端方面展现自己的才华。
                </p>
            </div>

            <div class="word">
                <p>
                    喜欢js，非常热爱编程，喜欢钻研新的技术，</br>具有很强的自学能力和良好的学习方法，喜欢研究各种新的框架。
                </p>
            </div>

            <div class="word">
                <p>
                    平时喜欢打篮球，乒乓球，爬山等户外活动。<br/>
                    喜欢与前端朋友聚会，聊有关前端技术难点及前端新技术。易和人相处，拥有良好的亲和力。<br>
                </p>
            </div>
            <div class="top"></div>
            <div class="foot">
                 <footer class="contact_scale">
                    <div class="contact_scale footer">
                        <a href="javascript:;" target="_blank">博客</a>
                    </div>
                    <div class="contact_scale footer">All Rights Reserved&nbsp;</div>
                    <div class="contact_scale footer"><a href="#" target="_blank">晋ICP备16000830号</a>&nbsp;Copyright &copy; 2015 - 2016</div>
                </footer>

            </div>

        </div>
    </div>
    <!--</div>-->
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?1bedf5ef1c3ad255572ea24d0d420a22";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

<script src="//cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script src="js/jquery.fullpage.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.isotope.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/handler.js"></script>
<script src="js/resumeenter.js"></script>
<script>
    //宇宙特效
    "use strict";

    var canvas = document.getElementById('canvas'),
            ctx = canvas.getContext('2d'),
            w = canvas.width = window.innerWidth,
            h = canvas.height = window.innerHeight,

            hue = 217,
            stars = [],
            count = 0,
            maxStars = 1300;//星星数量

    var canvas2 = document.createElement('canvas'),
            ctx2 = canvas2.getContext('2d');
    canvas2.width = 100;
    canvas2.height = 100;
    var half = canvas2.width / 2,
            gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
    gradient2.addColorStop(0.025, '#CCC');
    gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
    gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
    gradient2.addColorStop(1, 'transparent');

    ctx2.fillStyle = gradient2;
    ctx2.beginPath();
    ctx2.arc(half, half, half, 0, Math.PI * 2);
    ctx2.fill();

    // End cache

    function random(min, max) {
        if (arguments.length < 2) {
            max = min;
            min = 0;
        }

        if (min > max) {
            var hold = max;
            max = min;
            min = hold;
        }

        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    function maxOrbit(x, y) {
        var max = Math.max(x, y),
                diameter = Math.round(Math.sqrt(max * max + max * max));
        return diameter / 2;
        //星星移动范围，值越大范围越小，
    }

    var Star = function() {

        this.orbitRadius = random(maxOrbit(w, h));
        this.radius = random(60, this.orbitRadius) / 8;
        //星星大小
        this.orbitX = w / 2;
        this.orbitY = h / 2;
        this.timePassed = random(0, maxStars);
        this.speed = random(this.orbitRadius) / 50000;
        //星星移动速度
        this.alpha = random(2, 10) / 10;

        count++;
        stars[count] = this;
    }

    Star.prototype.draw = function() {
        var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
                y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
                twinkle = random(10);

        if (twinkle === 1 && this.alpha > 0) {
            this.alpha -= 0.05;
        } else if (twinkle === 2 && this.alpha < 1) {
            this.alpha += 0.05;
        }

        ctx.globalAlpha = this.alpha;
        ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
        this.timePassed += this.speed;
    }

    for (var i = 0; i < maxStars; i++) {
        new Star();
    }

    function animation() {
        ctx.globalCompositeOperation = 'source-over';
        ctx.globalAlpha = 0.5; //尾巴
        ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)';
        ctx.fillRect(0, 0, w, h)

        ctx.globalCompositeOperation = 'lighter';
        for (var i = 1, l = stars.length; i < l; i++) {
            stars[i].draw();
        };

        window.requestAnimationFrame(animation);
    }

//    setTimeout(animation(),3000);
    animation();
    $(function(){
//        alert('.indexs li'+$('.indexs li').size())
        //代码初始化
        var size=$('.img li').size();
        var i=0;
        $('.img li').eq(0).show();//默认显示第一张
        $('.indexs li').eq(0).addClass('active');

        //时间轴手动
        $('.indexs li').mouseover(function(){
            $(this).addClass('active').siblings().removeClass('active');
            $(this).children('div').fadeIn(300);
            var index=$(this).index();
                i=index;
            $('.img li').eq(index).fadeIn(300).siblings().fadeOut(300);
        }).mouseout(function(){
            $(this).children('div').fadeOut(300);
        });
        //时间轴自动有问题
       /* function autos(){
            i++;
            if(i==size){
               i=0;
            }
            $('.indexs li').eq(i).addClass('active').siblings().removeClass('active');
            $('.img li').eq(i).fadeIn(300).siblings().fadeOut(300);
        }
        //定时器开始
        var t=setInterval(autos(),500);
        //定时器结束
        $('.img li img').hover(function(){
//            alert('1');
                clearInterval(t);
        },function(){
//            alert('1');
                t=setInterval(autos(),500)
        });*/
        //左按钮点击事件
        function moveL(){
            i--;
            if(i==-1){
                i=size-1;
            }
            $('.indexs li').eq(i).addClass('active').siblings().removeClass('active');
            $('.img li').eq(i).fadeIn(300).siblings().fadeOut(300);
        }
        $('div.lf').click(function(){
                    moveL();
        });
        //右按钮点击事件
        function moveR(){
            i++;
            if(i==size){
                i=0;
            }
            $('.indexs li').eq(i).addClass('active').siblings().removeClass('active');
            $('.img li').eq(i).fadeIn(300).siblings().fadeOut(300);
        }
        $('div.rt').click(function(){
            moveR();
        });

//        setTimeout(function enter() {
//            $('#enter').fadeOut(600);
//        },4500);

    });


</script>
</body>
</html>
